<template>
  <div>
    <!-- data环状图 -->
    <div
      ref="chart"
      style="
        width: 100%;
        height: 350px;
        
        
      "
    ></div>
  </div>
</template>
<style></style>
<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.createPieChart();
  },
  methods: {
    createPieChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        
             legend: {
          show: true,
          orient: 'vertical', // 设置图例垂直排列
          right: '1%', // 设置图例距离右侧的距离
          top: 'middle', // 设置图例顶部对齐方式
          itemWidth: 25, // 设置图例宽度
          itemHeight: 15, // 设置图例高度
          textStyle: {
            fontSize: 13, // 设置图例字体大小
            fontWeight: 'bold', // 设置图例字体粗细
            color: '#fff', // 设置图例字体颜色
          },
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"], //设置饼图的内半径和外半径。
            // roseType: 'angle',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside", // 设置标签位置为外部
              textStyle: { // 在这里设置标签的字体大小和粗细
                fontSize: 16, // 设置字体大小
                fontWeight: 'bold', // 设置字体粗细
                color: "#fff", // 设置字体颜色
              },
            },

            labelLine: {
              show: true, // 设置标签线显示
              length2: 50, // 设置标签线的长度
              maxSurfaceAngle: 80, // 设置标签线的最大角度
            },
            data: [
              { value: 9, name: "WIFI热点信息泄露风险" },
              { value: 40, name: "通讯录信息泄露风险" },
              { value: 21, name: "位置信息泄露风险" },
              { value: 17, name: "短信信息泄露风险" },
              { value: 13, name: "基站信息泄露风险" },
            ],
          },
          {
            // 添加新的系列对象
            type: "pie",
            radius: ["50%", "50%"], // 设置半径为50%，使其在环形图中间显示
            label: {
              show: true, // 显示标签
              position: "center", // 设置标签位置为中心
               textStyle: { // 在这里设置标签的字体大小和粗细
                fontSize: 16, // 设置字体大小
                fontWeight: 'bold', // 设置字体粗细
              },
            },

            data: [
              {
                value: 1800,
                name: "总量",
                itemStyle: {
                  color: "#ccc", // 设置总量的颜色为灰色
                },
                label: {
                  show: true, // 显示总量的标签
                  position: "center", // 设置总量的标签位置为中心
                  formatter: function (params) {
                    // 设置总量的标签格式
                    return params.value; // 返回总量的值作为标签的内容
                  },
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>
